<template>
    <div class="Detail" v-loading="loading">
        <!--      头-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">课程详情</p>
        </Top>
        <div class="main"  @click.prevent="replyBlur">
            <cube-scroll>
                <div v-if="intro_video">
                    <!--视频海报-->
                    <div class="poster" v-show="!videoShow">
                        <img :src="videoPoster" alt="" />
                        <div class="mask">
                            <img
                                 @click="playVideo()"
                                 class="playBtn"
                                 src="../../assets/play.png"
                                 alt="" />
                        </div>
                    </div>
                    <!--试看提示-->
                    <div class="try-tips animated fadeIn" v-if="videoShow && intro_video.is_try===0" v-html="videoTips"></div>
                    <!--           视频块-->
                    <div class="video" v-show="videoShow">
                        <video-player  class="video-player vjs-custom-skin"
                                      ref="videoPlayer"
                                      :playsinline="true"
                                      :options="playerOptions"
                                      @play="onPlayerPlay($event)"
                                      @pause="onPlayerPause($event)"
                                      @ended="onPlayerEnded($event)">
                        </video-player>
                    </div>
                </div>
                <!--            标题 收藏块-->
                <h3 class="title-fa" v-if="intro_video">
                    {{intro_video.video_name}}
                    <!--分享-->
                    <svg v-if="isWeiXin() || inApp()" @click="shareWindowShow=true" class="icon share" aria-hidden="true"><use xlink:href="#icon-share"></use></svg>
                    <!--收藏-->
                    <svg v-if="!(intro_lession.is_collect)" @click="collect(1)" class="icon fa" aria-hidden="true"><use xlink:href="#icon-icon_collect"></use></svg>
                    <svg v-else  @click="collect(2)" class="icon fa on" aria-hidden="true"><use xlink:href="#icon-icon_collect_selected"></use></svg>
                    <!--收藏动画块-->
                    <svg v-if="intro_lession.is_collect" class="icon fa-fade " aria-hidden="true"><use xlink:href="#icon-icon_collect_selected"></use></svg>
                </h3>
                <!--            直播平台信息公开-->
                <div class="hls" v-if="intro_lession.is_buy===1">
                    <p class="time">{{intro_lession.lession_time}}&emsp;{{intro_lession.lession_num_hour}}课时&emsp;{{intro_lession.lession_name}}</p>
                    <h4 class="info" v-if="intro_lession.live_platform&&intro_lession.live_door&&intro_lession.live_door_password">直播平台：{{intro_lession.live_platform}}&emsp;房间号：{{intro_lession.live_door}}&emsp;密码：{{intro_lession.live_door_password}}</h4>
                </div>
                <!--            tab切换-->
                <ul class="de-tab">
                    <li :class="{on:tabIndex==1}" @click="tabIndex=1">简介<i class="el-icon-loading" v-if="icon1"</li>
                    <li :class="{on:tabIndex==2}" @click="switchTab(2)">选集({{intro_lession.videonum}})<i class="el-icon-loading" v-if="icon2"></i></li>
                    <li :class="{on:tabIndex==3}" @click="switchTab(3)">评论({{intro_lession.commentnum}})<i class="el-icon-loading" v-if="icon3"></i></li>
                </ul>
                <!--            组件群-->
                <!--            <transition name="slide-fade">-->
                <About v-if="tabIndex==1" :data="{intro_lession:intro_lession,intro_teacher:intro_teacher}"></About>
                <Selections v-if="tabIndex==2" :data="{videoList:videoList}"></Selections>
                <Discuss v-if="tabIndex==3" :data="{comment_list:comment_list,intro_lession:intro_lession}" @childReply="doReply" @updComment="UpdComment" @commentNum="updCommentNum"></Discuss>
            </cube-scroll>
            <!--            </transition>-->
        </div>
        <!--            底部价格未购买-->
        <ul class="notbuy" v-if="intro_lession.is_buy===0">
            <li class="price"><span>{{intro_lession.lession_price}}</span>花瓣</li>
            <li class="buy" @click="buyLesson">购买</li>
        </ul>
        <!--            底部价格已购买-->
        <ul class="isbuy" v-if="intro_lession.is_buy===1" >
            <!--评论输入框----------------------->
            <input type="text" ref="commentDom" :placeholder="commentPlaceholder" v-model="commentContent" />
            <span class="post" @click="postComment">发布</span>
            <!--评论-->
            <div class="comment" @click="switchTab(3)">
                <p><svg class="icon" aria-hidden="true"><use xlink:href="#icon-iconfontpinglun"></use></svg></p>
                <p>{{intro_lession.commentnum}}</p>
            </div>
            <!--点赞-->
            <div class="thumbs" :class="{on:intro_lession.is_praise===1}" @click="thumb">
                <p class="relative">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>
                    <!--点赞动画块-->
                    <svg v-if="intro_lession.is_praise===1" class="icon thumb-fade" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>
                </p>
                <p>{{intro_lession.lession_praise}}</p>
            </div>
        </ul>

        <!--弹窗-->
        <transition name="bounce-up">
            <div class="mask" v-if="maskShow">
                <!--购买-->
                <div class="mask-content" v-if="buyShow">
                    <h3>确认购买课程 <span class="close" @click="closeMask">×</span></h3>
                    <p>课程：{{intro_lession.lession_name}}</p>
                    <p>价格：{{intro_lession.lession_price}} 花瓣</p>
                    <div style="text-align:center"><el-button class="buyBtn" type="primary" :loading="touchBuy" @click="buyNow">立即购买</el-button></div>
                </div>
                <!--支付-->
                <div class="mask-content" v-if="payShow">
                    <h3 class="payH3">请输入支付密码 <span class="close" @click="closeMask">×</span></h3>
                    <!--输入支付密码-->
                    <div class="pwdInp" v-if="hasPwd===1">
                        <input type="password" placeholder="请输入支付密码" v-model="pay_passwod" />
                        <router-link
                                     v-if="!inApp()"
                                     tag="div"
                                     style="text-align:right;margin-top:.2rem;"
                                     to="/setPaypwd">忘记密码？</router-link>
                        <div style="text-align:center"><el-button class="buyBtn" type="primary" :loading="touchBuy" @click="payNuw">立即支付</el-button></div>
                    </div>
                    <!--设置支付密码-->
                    <p style="text-align:center;margin-top:1rem;" v-if="hasPwd===0">您还没有设置支付密码，<router-link tag="span" style="color:#00a9cd;" to="/setPaypwd">立即设置 ></router-link></p>
                    <!--余额不足-->
                    <div class="notEnough animated pulse" v-if="notEnoughShow" @click="goCharge">花瓣不足，去充值 ></div>
                </div>
            </div>
        </transition>
        <!--分享弹窗-->
        <div class="mask" v-if="shareWindowShow">
            <div class="share-content-window">
                <div class="close" @click="shareWindowShow=false">
                    <img class="imgFull" src="../../assets/exam/close.png" alt="" />
                </div>
                <!--课程详情-->
                <div class="lesson-wrapper">
                    <h3>分享花艺学院视频</h3>
                    <div class="info-box clearfix">
                        <img :src="intro_video.video_img" alt="">
                        <div class="lesson-name">{{intro_video.video_name}}</div>
                    </div>
                </div>
                <!--分享列表-->
                <div class="share-wrapper">
                    <fieldset class="noMore">
                        <legend align="center" class="noMoreText">分享</legend>
                    </fieldset>
                    <!--列表-->
                    <ul class="share-list">
                        <li @click="shareLesson(0)">
                            <img src="../../assets/exam/tk_weixin.png" alt="">
                            <p>微信好友</p>
                        </li>
                        <li  @click="shareLesson(1)">
                            <img src="../../assets/exam/tk_friend.png" alt="">
                            <p>朋友圈</p>
                        </li>
                        <li  @click="shareLesson(2)" v-if="inApp()">
                            <img src="../../assets/exam/tk_weibo.png" alt="">
                            <p>微博</p>
                        </li>
                        <li  @click="shareLesson(3)">
                            <img src="../../assets/exam/tk_QQzone.png" alt="">
                            <p>QQ空间</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--微信分享引导图-->
        <div class="mask mask2" @click="wxShareShow=false" v-if="wxShareShow">
            <img class="share-wx" src="../../assets/exam/share-wx.png" alt="" />
        </div>

    </div>
</template>

<script>
    //微信js-sdk
    import wx from 'weixin-js-sdk'
    //引入 vue video 组件
    import { videoPlayer } from 'vue-video-player';
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    import About from '@/components/detailVues/About' //详情页简介组件
    import Selections from '@/components/detailVues/Selections' //详情页选集组件
    import Discuss from '@/components/detailVues/Discuss' //详情页评论组件
    export default {
        name: 'Detail',
        components: {
            Top,//顶部信息组件
            About, //详情页简介组件
            Selections,//详情页选集组件
            Discuss,//详情页评论组件
            videoPlayer,//vue video 组件
        },
        data () {
            return {
                is_look:0,//登录后视频分享过后才能观看
                wxShareShow:false,//微信引导图显示状态
                shareWindowShow:false,//分享弹窗
                videoShow:false,//视频默认不显示
                videoPoster:null,
                //video 配置
                playerOptions: {
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        fullscreenToggle: true  //全屏按钮
                    },
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false,
                    muted: false, // 默认情况下将会消除任何音频。http://suyiimg.j7cms.com/t1/index.m3u8
                    loop: false, // 循环播放。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "application/x-mpegURL",
                        src: "" //你的m3u8地址（必填）
                    }],
                    poster: "", //你的封面地址
                    width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                },

                loading:false,//加载动画
                shareTip:false,//微信分享提示
                sourceLoading:false,//video source标签动态渲染
                controls:false,//视频控件是否显示
                videoMask:true,//视频遮罩
                videoTips:'试看一分钟',//视频提示
                videoUrl:'',//视频地址
                netType:'',//测试
                isFa:false,//是否收藏
                tabIndex:1,//默认选中简介

                touchBuy:false,//立即购买是否可点击
                maskShow:false,//弹窗
                notEnoughShow:false,//余额不足 去充值
                buyShow:false,//购买弹窗
                payShow:false,//支付弹窗
                hasPwd:0,//0:没有支付密码 1:有
                pay_passwod:'',//支付密码

                /*tab切换动画组*/
                icon1:false,
                icon2:false,
                icon3:false,

                /*简介数据*/
                intro_lession:{},
                intro_teacher:{},
                intro_video:{},

                /*选集数据*/
                videoList:[],

                /*评论数据*/
                comment_list:[],
                commentPlaceholder:'期待您的评价',//评论框holder

                //评论传后台一些数据
                commentContent:'',//评论框内容
                replyId:0,//0:直接评价课程 其他数值：回复他人
                member_id:this.getMemberId(),//当前用户
            }
        },
        created(){
            /*初始化获取简介等基本信息*/
            this.pageInit()
        },
        mounted(){
            //获取微信签名配置
            this.$nextTick(function () {
                if(this.isWeiXin()){
                    this.getConfig() 
                }
            })
        },
        computed: {
            player() {
                return this.$refs.videoPlayer.player
            }
        },
        methods:{
            //页面初始化
            pageInit(){
                let data = this.detailRoute();
                this.loading = true;
                this.sourceLoading = false;
                this.Posthttp('/?method=flower.index.lessionInfo',data,(res)=>{
                    this.loading = false;
                    if(JSON.parse(res.bodyText).status===1){
                        this.intro_lession = JSON.parse(res.bodyText).data.lession || {};
                        this.intro_teacher = JSON.parse(res.bodyText).data.teacher || {};
                        this.intro_video = JSON.parse(res.bodyText).data.video || {};
                        this.videoPoster = JSON.parse(res.bodyText).data.video && JSON.parse(res.bodyText).data.video.video_img || null;
                        this.playerOptions.sources[0].src = JSON.parse(res.bodyText).data.video && JSON.parse(res.bodyText).data.video.video_url || '';
                        this.is_look = JSON.parse(res.bodyText).data.lession.is_look
                    }else{
                        this.$message.warning({duration:1000,message:JSON.parse(res.bodyText).msg})
                    }

                });  
            },
            //成功分享后会话后台进行记录
            shareCount(type){
                this.Posthttp('/?method=flower.pub.addshare',{
                    member_id:this.getMemberId(),
                    lession_id:this.intro_lession.lession_id,
                    share_type:type
                },(res)=>{
                    this.is_look = JSON.parse(res.bodyText).data.is_look
                })
            },
            // 微信分享参数
            getConfig(){ 
                let url = window.location.href
                this.Posthttp('/?method=flower.pub.wxinfo',{url:url},(res)=>{
                    let res2 = JSON.parse(res.bodyText).data.wx
                    this.wxInit(res2)
                })
            },
            //微信js-sdk实例
            wxInit(res){
                let that = this
                /*1*/
                wx.config({
                    debug: false,
                    appId: res.appId,
                    timestamp: res.timestamp,
                    nonceStr: res.nonceStr,
                    signature: res.signature,
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
                })
                /*2*/
                wx.ready(function() {
                    //分享给朋友
                    wx.onMenuShareAppMessage({
                        title: '花艺学院优选课程', // 分享标题
                        desc: that.intro_video.video_name, // 分享描述
                        link: window.location.href, // 分享链接
                        imgUrl: that.intro_video.video_img, // 分享图标
                        success: function() {

                            /*if(that.getMemberId()===0){//未登录分享
                                that.setOffline(that.intro_lession.lession_id,'AppMessage',1)
                            }else{//已登录分享
                                that.shareCount(1)
                            }*/
                            that.setOffline(that.intro_lession.lession_id,'AppMessage',1)
                            that.$message.success("成功分享给朋友")
                        },
                        cancel: function() {
                            that.$message.warning("分享失败,您取消了分享!")
                        }
                    });
                    //分享到朋友圈
                    wx.onMenuShareTimeline({
                        title: '花艺学院优选课程', // 分享标题
                        desc: that.intro_video.video_name, // 分享描述
                        link: window.location.href, // 分享链接
                        imgUrl: that.intro_video.video_img, // 分享图标
                        success: function() {

                            /*if(that.getMemberId()===0){//未登录分享
                                that.setOffline(that.intro_lession.lession_id,'Timeline',1)
                            }else{//已登录分享
                                that.shareCount(2)
                            }*/
                            that.setOffline(that.intro_lession.lession_id,'Timeline',1)
                            that.$message.success("分享到朋友圈成功")
                        },
                        cancel: function() {
                            that.$message.warning("分享失败,您取消了分享!")
                        }
                    });
                    //分享到QQ
                    wx.onMenuShareQQ({
                        title: '花艺学院优选课程', // 分享标题
                        desc: that.intro_video.video_name, // 分享描述
                        link: window.location.href, // 分享链接
                        imgUrl: that.intro_video.video_img, // 分享图标
                        success: function() {
                            that.$message.success("成功分享给QQ")
                        },
                        cancel: function() {
                            that.$message.warning("分享失败,您取消了分享!")
                        }
                    });
                    //分享到腾讯微博
                    wx.onMenuShareWeibo({
                        title: '花艺学院优选课程', // 分享标题
                        desc: that.intro_video.video_name, // 分享描述
                        link: window.location.href, // 分享链接
                        imgUrl: that.intro_video.video_img, // 分享图标
                        success: function() {
                            that.$message.success("成功分享到腾讯微博")
                        },
                        cancel: function() {
                            that.$message.warning("分享失败,您取消了分享!")
                        }
                    });
                    //分享到QQ空间
                    wx.onMenuShareQZone({
                        title: '花艺学院优选课程', // 分享标题
                        desc: that.intro_video.video_name, // 分享描述
                        link: window.location.href, // 分享链接
                        imgUrl: that.intro_video.video_img, // 分享图标
                        success: function() {
                            that.$message.success("成功分享到QQ空间")
                        },
                        cancel: function(){
                            that.$message.warning("分享失败,您取消了分享!")
                        }
                    })

                })
                wx.error(function(err){
                    that.$message.warning(JSON.stringify(err))
                })
            },
            //播放视频
            playVideo(){
                if(!this.isWeiXin() && !this.inApp()){
                    this.videoShow = true
                    this.player.play()  
                    return
                }
                let storage = JSON.parse(window.localStorage.getItem(this.intro_lession.lession_id)),
                    AppMessage = storage?storage.AppMessage:'',
                    Timeline = storage?storage.Timeline:''

                console.log('AppMessage:'+AppMessage)
                console.log('Timeline:'+Timeline)

                if(this.getMemberId()===0 && parseFloat(this.intro_lession.lession_price)<=0){//未登录检测分享次数
                    /**/
                    this.shareType(AppMessage,Timeline)
                }
                if(this.getMemberId() != 0){//登录检测分享次数
                    if(this.is_look===0 ){
                        /**/
                        this.shareType(AppMessage,Timeline)
                    }else{
                        this.videoShow = true
                        this.player.play() 
                    }
                }

            },
            /*判断分享类型*/
            shareType(AppMessage,Timeline){
                /*分享过朋友*/
                if(AppMessage != 1){
                    this.$confirm('你还没有分享给朋友哦~', '分享朋友和朋友圈可免费观看', {
                        confirmButtonText: '去分享',
                        cancelButtonText: '取消',
                    }).then(() => {
                        if(this.inApp()){
                            this.shareWindowShow = true
                        }else{
                            this.wxShareShow = true  
                        }
                    }).catch(() => {         
                    }) 
                    return
                }

                /*分享过朋友圈*/
                if(Timeline != 1){
                    this.$confirm('你还没有分享到朋友圈哦~', '分享朋友和朋友圈可免费观看', {
                        confirmButtonText: '去分享',
                        cancelButtonText: '取消',
                    }).then(() => {
                        if(this.inApp()){
                            this.shareWindowShow = true
                        }else{
                            this.wxShareShow = true  
                        }
                    }).catch(() => {         
                    }) 
                    return
                }

                /*开始播放*/
                this.videoShow = true
                this.player.play()
            },
            onPlayerPlay(player) {//监听视频播放
                this.videoTips = '试看一分钟';
            },
            onPlayerPause(player){//监听视频暂停
            },
            onPlayerEnded(player){//监听视频结束
                this.videoTips = '试看结束，请购买观看完整版~';
            },
            //详情页切换
            switchTab(num){
                //if(this.tabIndex === num)return;
                if(num === 2){//选集数据获取
                    this.icon2 = true;
                    this.Posthttp('/?method=flower.index.videolist',{lession_id:this.intro_lession.lession_id,member_id:this.getMemberId()},(res)=>{
                        this.icon2 = false;
                        this.tabIndex = num;
                        if(JSON.parse(res.bodyText).status === 0){
                            this.videoList=[];
                        }else if(JSON.parse(res.bodyText).status === 1){
                            this.videoList = JSON.parse(res.bodyText).data.video_list;
                        }
                    });
                }else if(num === 3){//评论数据获取
                    this.icon3 = true;
                    this.Posthttp('/?method=flower.index.commentlist',{member_id:this.getMemberId(),lession_id:this.intro_lession.lession_id,page:1},(res)=>{
                        this.icon3 = false;
                        this.tabIndex = num;
                        if(JSON.parse(res.bodyText).status === 0){
                            this.comment_list = [];
                        }else if(JSON.parse(res.bodyText).status === 1){
                            this.comment_list = JSON.parse(res.bodyText).data.comment_list;
                        }
                    });
                }
            },
            /*点赞*/
            thumb(){
                if(this.getMemberId() === 0){
                    this.$router.push('/login')
                    return
                }
                if(this.getMemberId() === 0){
                    this.$router.push('/login')
                    return
                }
                let praise_type = this.intro_lession.is_praise===0?1:2;
                this.Posthttp('/?method=flower.user.addPraise',{member_id:this.getMemberId(),lession_id:this.intro_lession.lession_id,video_id:this.intro_video.video_id,praise_type:praise_type},(res)=>{
                    if(JSON.parse(res.bodyText).status === 0){
                        this.$message.warning('失败了~~请重试~');
                    }else if(JSON.parse(res.bodyText).status === 1){

                        if(this.intro_lession.is_praise===0){
                            this.intro_lession.is_praise = 1;
                            this.intro_lession.lession_praise += 1;
                        }else{
                            this.intro_lession.is_praise = 0;
                            this.intro_lession.lession_praise -= 1;
                        }

                    }
                });
            },
            /*分享*/
            shareLesson(index){
                if(this.deviceType() === 1){//安卓 shareHy(String title,String content,String url,String imageUrl,int type) type=0表示分享花艺师测评，1-表示分享课程
                    window.hy.shareHy('花艺学院优选课程',this.intro_video.video_name,window.location.href,this.intro_video.video_img,index,this.intro_lession.lession_id)
                }else if(this.deviceType() === 2){//IOS
                    let data = {
                        title:'花艺学院优选课程',
                        contentL:this.intro_video.video_name,
                        url:window.location.href,
                        lession_id:this.intro_lession.lession_id,
                        imageUrl:this.intro_video.video_img,
                        type:index
                    }
                    window.webkit.messageHandlers.shareHy.postMessage(JSON.stringify(data))
                }else{//WAP-wechat
                    if(this.isWeiXin()){
                        this.wxShareShow = true
                    }
                }
            },
            /*收藏*/
            collect(state){
                if(this.getMemberId() === 0){//判断登陆
                    this.$router.push('/login')
                    return;
                }
                /*
                    state === 1//收藏
                    state === 2//取消收藏
                */
                this.Posthttp('/?method=flower.user.addCollect',{member_id:this.getMemberId(),lession_id:this.intro_lession.lession_id,collect_type:state},(res)=>{
                    if(JSON.parse(res.bodyText).status === 0){
                        this.$message.warning('失败了~~请重试~');
                    }else if(JSON.parse(res.bodyText).status === 1){
                        this.intro_lession.is_collect = this.intro_lession.is_collect===0?1:0;
                    }
                });
            },
            /*评论子组件的传递事件*/
            doReply(msg){
                this.commentContent = '';
                this.commentPlaceholder = '回复'+msg.comment_name+'：';
                this.replyId = msg.comment_id;
                this.$refs.commentDom.focus();
            },
            UpdComment(msg){//更新分页后的评论数组
                this.comment_list = msg;
            },
            updCommentNum(){//更新评论总数
                this.intro_lession.commentnum--;
            },
            /*发布评论*/
            postComment(){
                if(this.getMemberId() === 0){//判断登陆
                    this.$router.push('/login')
                    return;
                }
                if(!(this.commentContent.trim()))return;

                this.Posthttp('/?method=flower.user.comment',{member_id:this.getMemberId(),content:this.commentContent,lession_id:this.intro_lession.lession_id,comment_id:this.replyId},(res)=>{
                    if(JSON.parse(res.bodyText).status === 0){
                        this.$message.warning(JSON.parse(res.bodyText).msg);
                    }else if(JSON.parse(res.bodyText).status === 1){
                        //输入框重置
                        this.replyBlur();
                        //评论总数更改
                        this.intro_lession.commentnum = JSON.parse(res.bodyText).data.commentnum;
                        //一级，二级回复判断
                        if(JSON.parse(res.bodyText).data.comment.comment_depth == 1){
                            this.comment_list.unshift(JSON.parse(res.bodyText).data.comment);//评论列表更改
                            console.log(this.comment_list);
                            console.log(JSON.parse(res.bodyText).data.comment);
                        }else if(JSON.parse(res.bodyText).data.comment.comment_depth == 2){
                            this.comment_list.forEach(function(value,index){
                                if(value.comment_id === JSON.parse(res.bodyText).data.comment.parent_id){
                                    value.reply.push(JSON.parse(res.bodyText).data.comment);
                                }
                            });
                        }
                    }
                });
            },
            //评论框初始化
            replyBlur(){
                this.commentContent = '';
                this.replyId = 0;
                this.commentPlaceholder = '期待您的评价';
            },
            /*-------------------------
                touchBuy:false,//立即购买是否可点击
                maskShow:false,//弹窗
                notEnoughShow:false,//余额不足 去充值
                buyShow:false,//购买弹窗
                payShow:false,//支付弹窗
                hasPwd:0,//0:没有支付密码 1:有
            -----------------------------------*/

            //关闭弹窗
            closeMask(){
                this.maskShow = false;
                this.touchBuy = false;
                this.maskShow = false;
                this.notEnoughShow = false;
                this.buyShow = false;
                this.payShow = false;
                this.hasPwd = 0;
            },
            //点击底部购买课程
            buyLesson(){
                if(this.getMemberId() === 0){//未登录 去登陆
                    this.$confirm('此课程为付费课程，请先登录进行购买', '温馨提示', {
                        confirmButtonText: '去登录',
                        cancelButtonText: '取消',
                        type: 'info '
                    }).then(() => {
                        this.$router.push('/login');
                    }).catch(() => {
                        //do nothing
                    })

                }else{//已登陆 弹出购买窗
                    this.maskShow = true;//调起弹窗
                    this.buyShow=true;//购买弹窗
                }
            },
            //去充值
            goCharge(){
                this.$router.push('/bag/deposit')
            },
            //立即购买 检测是否有设支付密码
            buyNow(){
                this.touchBuy = true;//按钮可否点击
                this.Posthttp('/?method=flower.user.checkPayPassword',{member_id:this.getMemberId()},(res)=>{
                    this.touchBuy = false;

                    this.buyShow=false;//购买板块关闭
                    this.payShow=true;//支付板块调起
                    this.hasPwd = JSON.parse(res.bodyText).status;//0:无支付密码 1:有支付密码
                });
            },
            //支付
            payNuw(){
                this.touchBuy = true;//按钮可否点击
                this.Posthttp('/?method=flower.buy.order',{lession_id:this.intro_lession.lession_id,pay_passwod:this.pay_passwod,member_id:this.getMemberId()},(res)=>{
                    this.touchBuy = false;

                    if(JSON.parse(res.bodyText).status === 1){
                        this.$message.warning(JSON.parse(res.bodyText).msg)
                        window.location.reload();
                    }else if(JSON.parse(res.bodyText).status === 3){
                        this.notEnoughShow = true
                    }else{
                        this.$message.warning(JSON.parse(res.bodyText).msg)
                    }
                })
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Detail {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /*微信分享引导图*/
        .share-wx{
            width: 100%;
            position: absolute;
            top: 20%;
            left: 0;
        }
        .mask2{
            background-color: rgba(0,0,0,.8) !important;
        }
        /*视频海报*/
        .poster{
            position: relative;
            img{
                width: 100%;
                height: auto;
                display: block;
                font-size: 0;
            }
            .mask{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0,0,0,.4);
                z-index: 9;
            }
            .playBtn{
                width: 1rem;
                height: 1rem;
                position: absolute;
                left: calc(50% - .5rem);
                top: calc(50% - .5rem);
                z-index: 10;
            }
        }
        /*试看提示*/
        .try-tips{
            width: 100%;
            padding: .14rem .1rem;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,.6);
            color: #fff;
            font-size: .24rem;
            text-align: center;
            z-index: 10;
            letter-spacing: 2px;
        }
        /*视频*/
        .video{
            width: 100%;
            position: relative;
            overflow: hidden;
            video{
                width: 100%;
                height: auto;
            }
        }
        /*标题 收藏*/
        .title-fa{
            height: .8rem;
            line-height: .8rem;
            padding-right: 20%;
            padding-left: .2rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            color: #333;
            background-color: #f9f9f9;
            .fa{
                font-size: .4rem;
                position: absolute;
                right: .2rem;
                top: calc(50% - .2rem);
                color: #999;
                &.on{
                    color: #eb5b29;
                }
            }
            .share{
                font-size: .36rem;
                position: absolute;
                right: .86rem;
                top: calc(50% - .18rem);
                color: #999;
            }
            /*收藏动画*/
            .fa-fade{
                position: absolute;
                right: .2rem;
                top: 0;
                font-size: .4rem;
                color: #eb5b29;
                transition: all .5s;
                animation: fadeup .7s linear;
                opacity: 0;
                z-index: 60;
            }
        }
        /*直播*/
        .hls{
            padding: .22rem .2rem;
            font-size: .22rem;
            line-height: .38rem;
            .time{
                color: #999;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .info{
                color: #333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        /*详情页内切换表*/
        .de-tab{
            display: flex;
            justify-content: space-around;
            border-top: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
            font-size: .28rem;
            li{
                height: 1rem;
                line-height: 1rem;
                padding: 0 .26rem;
                &.on{
                    color: #eb5b29;
                    border-bottom: 1px solid #eb5b29;
                }
                .el-icon-loading{
                    color: #eb5b29;
                    margin-left: .04rem;
                }
            }
        }
        /*底部*/
        /*未购买*/
        .notbuy{
            width: 100%;
            position: fixed;
            bottom: 0;
            height: 1rem;
            line-height: 1rem;
            border-top: 1px solid #e4e4e4;
            li{
                float: left;
                &.price{
                    width: 67%;
                    padding-left: .2rem;
                    span{
                        font-size: .36rem;
                        color: #eb5b29;
                        vertical-align: -.04rem;
                        margin-right: .02rem;
                    }
                }
                &.buy{
                    width: 33%;
                    text-align: center;
                    background-color: #eb5b29;
                    color: #fff;
                    font-size: .26rem;
                    letter-spacing: 1px;
                }
            }
        }
        /*已购买*/
        .isbuy{
            width: 100%;
            position: fixed;
            bottom: 0;
            height: 1rem;
            line-height: 1rem;
            border-top: 1px solid #e4e4e4;
            background-color: #f5f5f5;
            padding: 0 .2rem;
            display: flex;
            justify-content: space-between;
            /*输入框*/
            input{
                width: 76%;
                height: .7rem;
                border-radius: .4rem;
                margin-top: .15rem;
                border: 1px solid #e4e4e4;
                outline: 0;
                padding-left: .3rem;
                padding-right: 1.1rem;
            }
            .post{
                position: absolute;
                left: 60%;
            }
            /*评论*/
            .comment{
                width: auto;
                height: 100%;
                display: flex;
                flex-flow: column wrap;
                justify-content: center;
                text-align: center;
                .icon{
                    font-size: .36rem;
                }
                p{
                    line-height: 1;
                    &:last-child{
                        margin-top: .05rem;
                    }
                }
            }
            /*点赞*/
            .thumbs{
                @extend .comment;
                &.on{
                    color: #eb5b29;
                }
                .thumb-fade{
                    position: absolute;
                    left: 0;
                    top: 0;
                    color: #eb5b29;
                    transition: all .5s;
                    animation: fadeup .6s linear;
                    opacity: 0;
                    z-index: 20;
                }
            }
        }
        /*购买弹窗*/
        .mask{
            background-color: rgba(0,0,0,.2);
        }
        /**/
        .mask-content{
            width: 90%;
            min-height: 4rem;
            position: absolute;
            left: 0;
            right: 0;
            top: 30%;
            margin: auto;
            padding: 0 0 .3rem;
            background-color: #fff;
            border-radius: .1rem;
            animation-duration: .4s;
            h3{
                text-align: center;
                line-height: 1rem;
                border-bottom: 1px solid rgba(226, 85, 35,.4);
                margin-bottom: .4rem;
                font-size: .28rem;
                color: #333;
                font-weight: 600;
            }
            .payH3{
                border-bottom: 1px solid #e4e4e4;
            }
            .close{
                position: absolute;
                right: .2rem;
                top: -.08rem;
                font-size: .4rem;
            }
            p{
                padding: 0 .2rem;
                margin-bottom: .3rem;
                color: #777;
                font-size: .26rem;
            }
            .buyBtn{
                width: 3rem;
                font-size: .28rem;
                margin-top: .6rem;
            }
            /*余额不足*/
            .notEnough{
                position: absolute;
                bottom: -1rem;
                left: calc(50% - 2rem);
                width: 4rem;
                height: .6rem;
                line-height: .6rem;
                background-color: #333;
                color: #edb53c;
                text-align: center;
                border-radius: .1rem;
            }
            /*支付密码*/
            .pwdInp{
                width: 100%;
                padding: 0 .2rem;
                input{
                    width: 100%;
                    border: 1px solid #e4e4e4;
                    height: .8rem;
                    padding-left: .3rem;
                    outline: none;
                }
            }
        }
    }
    /*点赞动画*/
    @keyframes fadeup{
        0{
            top: 0;
            opacity: 1;
            transform: scale(1);
        }
        50%{
            top: -.4rem;
            opacity: 0.5;
            transform: scale(1.1);
        }
        100%{
            top: -.6rem;
            opacity: 0;
            transform: scale(1.2);
        }
    }
</style>
